<!DOCTYPE html>
<html>
<head><meta name="generator" content="Hexo 3.9.0">
    <meta charset="utf-8">
    
    
    <title>JavaScript运动函数封装 | Liuqh&#39;blogs | 要有最朴素的生活  最遥远的梦想，即使明日天寒地冻 路远马亡。</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <meta name="keywords" content="运动函数">
    <link rel="shortcut icon" href="/img/favicon.ico">
    <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.2/dist/jquery.fancybox.min.css">
    <link rel="stylesheet" href="/css/style.css?v=1.4.3">
    
    <script type="text/javascript">
        // Data Center
        var DC = {
            reward:	true,
            lv: JSON.parse('{"enable":false,"app_id":null,"app_key":null,"icon":true}'),
            v: JSON.parse('{"enable":false,"appid":null,"appkey":null,"notify":true,"verify":true,"placeholder":"give me some sugers plz...","avatar":"wavatar"}'),
            g: JSON.parse('{"enable":false,"lazy":false,"owner":"liuqinghua0609","repo":"gitment","oauth":{"client_id":null,"client_secret":null},"perPage":10}'),
            d: JSON.parse('{"app_id":null}')
        };
    </script>
    <script type="text/javascript">
        window.lazyScripts=[];
    </script>
    
</head>


<body>
    <div id="loading" class="active"></div>

    <aside id="menu" class="">
  <div class="inner flex-row-vertical">
    <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menu-off">
        <i class="icon icon-lg icon-close"></i>
    </a>
    <div class="brand-wrap">
      
      <img src="/img/111.jpg" class="brand-bg">
      
      <div class="brand">
        <a href="/" class="avatar waves-effect waves-circle waves-light">
          <img src="/img/avatar.jpg">
        </a>
        <hgroup class="introduce">
          <h5 class="nickname">Liuqh</h5>
          <a href="mailto:心随远方 无畏无惧" title="心随远方 无畏无惧" class="mail">
            
              <span>心</span>
            
              <span>随</span>
            
              <span>远</span>
            
              <span>方</span>
            
              <span> </span>
            
              <span>无</span>
            
              <span>畏</span>
            
              <span>无</span>
            
              <span>惧</span>
            
          </a>
        </hgroup>
        
        <ul class="menu-link">
          
              <li>
                <a href="https://blog.csdn.net/qq_41840644" target="_blank">
                  <i class="icon icon-lg icon-heart"></i>
                </a>
              </li>
            
              <li>
                <a href="https://weibo.com/5902408774/profile?rightmod=1&amp;wvr=6&amp;mod=personnumber&amp;is_all=1" target="_blank">
                  <i class="icon icon-lg icon-weibo"></i>
                </a>
              </li>
            
        </ul>
        
      </div>
    </div>
    <div class="scroll-wrap flex-col">
      <ul class="nav">
        
            <li class="">
              <a href="/"  >
                <i class="icon icon-lg icon-home"></i>
                首页
              </a>
            </li>
        
            <li class="">
              <a href="/categories"  >
                <i class="icon icon-lg icon-th-list"></i>
                分类
              </a>
            </li>
        
            <li class="">
              <a href="/tags"  >
                <i class="icon icon-lg icon-tags"></i>
                标签
              </a>
            </li>
        
            <li class="">
              <a href="/custom"  >
                <i class="icon icon-lg icon-music"></i>
                随身听
              </a>
            </li>
        
            <li class="">
              <a href="/about"  >
                <i class="icon icon-lg icon-user"></i>
                我
              </a>
            </li>
        
      </ul>
    </div>
  </div>
</aside>

    <main id="main">
        <header class="top-header" id="header">
    <div class="flex-row clearfix">
        <a href="javascript:;" class="header-icon pull-left waves-effect waves-circle waves-light on" id="menu-toggle">
          <i class="icon icon-lg icon-navicon"></i>
        </a>
        <div class="flex-col header-title ellipsis">
            <span>JavaScript运动函数封装</span>
            
        </div>
        
        <a href="javascript:;" id="site_search_btn" class="header-icon pull-right waves-effect waves-circle waves-light">
            <i class="icon icon-lg icon-search"></i>
        </a>
        
    </div>
</header>
<header class="content-header post-header">
    <img src="/img/banner1.jpg" class="header-bg">
    <div class="container fade-scale">
        <h1 class="title">JavaScript运动函数封装</h1>
        <h5 class="subtitle">
            
                <time datetime="2019-07-26T12:02:29.000Z" itemprop="datePublished" class="page-time">
  2019-07-26
</time>


	<ul class="article-category-list"><li class="article-category-list-item"><a class="article-category-list-link" href="/categories/JavaScript学习笔记/">JavaScript学习笔记</a></li></ul>

            
        </h5>
        
    </div>
    

</header>

<div id="site_search">
    <div class="search-title clearfix">
        <span class="pull-left">
          <i class="icon icon-lg icon-search"></i>
        </span>
        <input type="text" id="local-search-input" name="q" results="0" placeholder="search my blog..." class="form-control pull-left"/>
        <a href="javascript:;" class="close pull-right waves-effect waves-circle waves-light">
          <i class="icon icon-lg icon-close"></i>
        </a>
    </div>
    <div id="local-search-result"></div>
</div>


<div class="container body-wrap">
    <article id="post-JavaScript运动函数封装"
  class="post-article article-type-post" itemprop="blogPost">
    <div class="post-card">
        <h1 class="post-card-title">JavaScript运动函数封装</h1>
        <div class="post-meta">
            <time class="post-time" title="2019-07-26 20:02:29" datetime="2019-07-26T12:02:29.000Z"  itemprop="datePublished">2019-07-26</time>

            
	<ul class="article-category-list"><li class="article-category-list-item"><a class="article-category-list-link" href="/categories/JavaScript学习笔记/">JavaScript学习笔记</a></li></ul>



            

            


            
        </div>
        <div class="post-content" id="post-content" itemprop="postContent">
            
            <h3 id="一、JavaScript运动函数封装"><a href="#一、JavaScript运动函数封装" class="headerlink" title="一、JavaScript运动函数封装"></a>一、JavaScript运动函数封装</h3><blockquote>
<p><strong>常用参数声明：</strong></p>
<ul>
<li>dom（object） : dom元素，通过document.getElementsByTagName等操作获取到的元素</li>
<li>target （number） : 运动的目标数值</li>
<li>speed （number）：匀速运动的速度</li>
</ul>
<ul>
<li>arr （string）：需要修改的属性名</li>
<li>parmobj （object）：需要修改的参数对象列表</li>
</ul>
</blockquote>
<h4 id="1-匀速运动函数封装"><a href="#1-匀速运动函数封装" class="headerlink" title="1.匀速运动函数封装"></a>1.匀速运动函数封装</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">uniformSpeed</span>(<span class="params">dom,target,speed</span>)</span>&#123;</span><br><span class="line">	clearInterval(dom.timer);</span><br><span class="line">	<span class="comment">//注意点1：</span></span><br><span class="line">	<span class="keyword">var</span> iSpeed = target - dom.offsetLeft &gt; <span class="number">0</span> ? speed:-speed;</span><br><span class="line">	dom.timer = setInterval(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="comment">//注意点:2：</span></span><br><span class="line">		<span class="keyword">if</span>(<span class="built_in">Math</span>.abs(target - dom.offsetLeft) &lt; <span class="built_in">Math</span>.abs(iSpeed))&#123;</span><br><span class="line">			dom.style.left= target +<span class="string">'px'</span>;</span><br><span class="line">			clearInterval(dom.timer);</span><br><span class="line">		&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">			dom.seyle.left = dom.offsetLeft + iSpeed +<span class="string">'px'</span>; </span><br><span class="line">		&#125;</span><br><span class="line">	&#125;,<span class="number">30</span>)		</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ol>
<li><p>首先我们需要注意的是iSpeed的值，当target的值大于元素当前值的时候，我们移动的是正值，即向左移动，反之则向右。</p>
</li>
<li><p>其次我们需要注意的是判断条件，因为我们传入的参数速度值，可能千奇百怪，所以不能完美的累加到目标值，所以我们判断的临界值为，当<strong>目标值减去当前值如果小于速度的</strong>话，就直接让元素到达目标值。</p>
</li>
<li><p>还有一点需要我们特别注意，就是dom.timer的写法，是为了防止当多个元素同时运行时，会清除其他元素定时器的情况</p>
<h4 id="2-减速（缓速）运动"><a href="#2-减速（缓速）运动" class="headerlink" title="2.减速（缓速）运动"></a>2.减速（缓速）运动</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">	<span class="function"><span class="keyword">function</span> <span class="title">decelerationSpeed</span>(<span class="params">dom,target</span>)</span>&#123;</span><br><span class="line">		clearInterval(dom.timer);</span><br><span class="line">		dom.timer = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">			<span class="keyword">var</span> iSpeed = (target - dom.offsetLeft)/<span class="number">7</span>;</span><br><span class="line">			<span class="comment">//注意点1：</span></span><br><span class="line">			iSpeed = iSpeed &gt; <span class="number">0</span> ? <span class="built_in">Math</span>.ceil(iSpedd) : <span class="built_in">Math</span>.floor(iSpeed);</span><br><span class="line">			<span class="keyword">if</span>(target == dom.offsetLeft)&#123;</span><br><span class="line">				clearInterval(dom.timer);</span><br><span class="line">			&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">				dom.style.left = dom.offsetLeft + iSpeed + <span class="string">'px'</span>;	</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>这里我们需要特别注意一下速度的计算方法，因为我们做减速运动时，是目标值减去当前值除以7得到的，所以他每次得到的并非是整数，这是就会出现一种情况，就是元素的移动距离无法到达目标值，因为css在渲染小数时会将<strong>297.12</strong>之类的数字渲染成<strong>297</strong><br>假设我们的目标值是300px，假设当你移动到最后的时候元素的left值为297.429的时候，那么css会认为他是297，所以目标值减去当前值为 300-297=3，然后下次移动的速度iSpeed = 3/7 = 0.428，那么下次元素的left的值是 297+0.428 = 297.428,所以此时他就陷入了死循环，那么此时我们需要做的就是向上取整，当是正数的时候我们向上取整，其实到最后的速度就几乎都是1，这时就可以准确到达我们的目标值了。</p>
<h4 id="3-透明度运动"><a href="#3-透明度运动" class="headerlink" title="3.透明度运动"></a>3.透明度运动</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 获取元素的样式</span></span><br><span class="line">   <span class="function"><span class="keyword">function</span> <span class="title">getStyle</span>(<span class="params">dom, arr</span>) </span>&#123;</span><br><span class="line">       <span class="keyword">if</span> (<span class="built_in">window</span>.getComputedStyle) &#123;</span><br><span class="line">           <span class="keyword">return</span> <span class="built_in">window</span>.getComputedStyle(dom, <span class="literal">null</span>)[arr];</span><br><span class="line">       &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">           <span class="keyword">return</span> dom.currentStyle[arr]; <span class="comment">//该方法只存在于IE中</span></span><br><span class="line">       &#125;</span><br><span class="line">   &#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">startMove</span>(<span class="params">dom,target</span>)</span>&#123;</span><br><span class="line">       clearInterval(timer);</span><br><span class="line">       timer = setInterval(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">           <span class="keyword">var</span>  iCur = <span class="built_in">parseFloat</span>(getStyle(dom,<span class="string">'opacity'</span>)),<span class="comment">//获取当前元素的样式值</span></span><br><span class="line">                iSpeed = ((target -iCur)/<span class="number">7</span>)*<span class="number">100</span>;<span class="comment">//注意点1：</span></span><br><span class="line">           iSpeed = iSpeed &gt; <span class="number">0</span> ? <span class="built_in">Math</span>.ceil(iSpeed):<span class="built_in">Math</span>.floor(iSpeed);</span><br><span class="line">           <span class="keyword">if</span>(iCur == target)&#123;</span><br><span class="line">               clearInterval(timer);</span><br><span class="line">           &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">               dom.style.opacity = iCur + iSpeed/<span class="number">100</span>;<span class="comment">//注意点2：</span></span><br><span class="line">           &#125;</span><br><span class="line">       &#125;,<span class="number">30</span>)</span><br><span class="line">   &#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>因为透明度属性比较特别，他是数值后面不加像素的所以我们单独拿出来处理。</p>
</li>
<li><p>因为透明度的值是[0,1]，所以我们需要将每次的变化值ispeed乘以100，如果不乘的话向上向下取整就直接是1或者-1，那么透明度就超范围了</p>
<h4 id="4-综合运动（多物体多状态-amp-amp-回调函数）"><a href="#4-综合运动（多物体多状态-amp-amp-回调函数）" class="headerlink" title="4.综合运动（多物体多状态&amp;&amp;回调函数）"></a>4.综合运动（多物体多状态&amp;&amp;回调函数）</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">startMove</span>(<span class="params">dom, arrobj, callback</span>) </span>&#123;</span><br><span class="line">       clearInterval(dom.timer);</span><br><span class="line">       dom.timer = setInterval(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">           <span class="keyword">var</span> iSpeed = <span class="literal">null</span>,</span><br><span class="line">               iCur = <span class="literal">null</span>,</span><br><span class="line">               stopFlag = <span class="literal">true</span>;</span><br><span class="line">           <span class="keyword">for</span> (<span class="keyword">var</span> arr <span class="keyword">in</span> arrobj) &#123;</span><br><span class="line">               iCur = <span class="built_in">parseFloat</span>(getStyle(dom, arr));</span><br><span class="line">               <span class="keyword">if</span> (arr === <span class="string">'opacity'</span>) &#123;</span><br><span class="line">                   iSpeed = (arrobj[arr] - iCur) / <span class="number">7</span> * <span class="number">100</span>;</span><br><span class="line">               &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">                   iSpeed = (arrobj[arr] - iCur) / <span class="number">7</span>;</span><br><span class="line">               &#125;</span><br><span class="line">               iSpeed = iSpeed &gt; <span class="number">0</span> ? <span class="built_in">Math</span>.ceil(iSpeed) : <span class="built_in">Math</span>.floor(iSpeed);</span><br><span class="line"></span><br><span class="line">               <span class="keyword">if</span> (arr === <span class="string">'opacity'</span>) &#123;</span><br><span class="line">                   dom.style.opacity = iCur + iSpeed / <span class="number">100</span>;</span><br><span class="line">               &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">                   dom.style[arr] = iCur + iSpeed + <span class="string">'px'</span>;</span><br><span class="line">               &#125;</span><br><span class="line">               <span class="keyword">if</span>(iCur != arrobj[arr])&#123;</span><br><span class="line">                   stopFlag = <span class="literal">false</span>;</span><br><span class="line">               &#125;</span><br><span class="line"></span><br><span class="line">           &#125;</span><br><span class="line">           <span class="keyword">if</span> (stopFlag) &#123;</span><br><span class="line">               clearInterval(dom.timer);</span><br><span class="line">               <span class="keyword">typeof</span> callback == <span class="string">'function'</span> &amp;&amp; callback();</span><br><span class="line">           &#125;</span><br><span class="line">       &#125;, <span class="number">30</span>)</span><br><span class="line">   &#125;</span><br></pre></td></tr></table></figure></li>
</ol>

        </div>
        
<blockquote class="post-copyright">
    <div class="content">
        
<span class="post-time">
    Last updated: <time datetime="2019-07-26T12:02:53.604Z" itemprop="dateUpdated">2019-07-26 20:02:53</time>
</span><br>


        
        转载注明出处，原文地址：<a href="/2019/07/26/JavaScript运动函数封装/" target="_blank" rel="external">http://liuqinghua0609.gitee.io/2019/07/26/JavaScript运动函数封装/</a>
        
    </div>
    <footer>
        <a href="http://liuqinghua0609.gitee.io">
            <img src="/img/avatar.jpg" alt="Liuqh">
            Liuqh
        </a>
    </footer>
</blockquote>

        
            <div class="page-reward">
    <a id="rewardBtn" href="javascript:;" class="page-reward-btn waves-effect waves-circle waves-light">赏</a>
</div>

            
        
        <div class="post-footer">
            
	<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/运动函数/">运动函数</a></li></ul>

            <div class="page-share-wrap">
    

<div class="page-share" id="pageShare">
    <ul class="reset share-icons">
      
      <li>
        <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=http://liuqinghua0609.gitee.io/2019/07/26/JavaScript运动函数封装/&title=《JavaScript运动函数封装》 — Liuqh'blogs&pic=http://liuqinghua0609.gitee.io/img/avatar.jpg" data-title="微博">
          <i class="icon icon-weibo"></i>
        </a>
      </li>
      
      <li>
        <a class="weixin share-sns wxFab" href="javascript:;" data-title="微信">
          <i class="icon icon-weixin"></i>
        </a>
      </li>
      
      <li>
        <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=http://liuqinghua0609.gitee.io/2019/07/26/JavaScript运动函数封装/&title=《JavaScript运动函数封装》 — Liuqh'blogs&source=" data-title=" QQ">
          <i class="icon icon-qq"></i>
        </a>
      </li>
      
    </ul>
 </div>



    <a href="javascript:;" id="shareFab" class="page-share-fab waves-effect waves-circle">
        <i class="icon icon-share-alt icon-lg"></i>
    </a>
</div>

        </div>
        
            


        
    </div>
    
<nav class="post-nav flex-row flex-justify-between flex-row-reverse">
  

  
    <div class="next">
      <a href="/2019/07/26/立即执行函数/" id="post-next" class="post-nav-link">
        <div class="tips">Next <i class="icon icon-angle-right icon-lg icon-pl"></i></div>
        <h4 class="title">立即执行函数</h4>
      </a>
    </div>
  
</nav>


    
    
        <aside class="post-widget">
            <nav class="post-toc-wrap" id="post-toc">
                <strong>目录</strong>
                <ol class="post-toc"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#一、JavaScript运动函数封装"><span class="post-toc-number">1.</span> <span class="post-toc-text">一、JavaScript运动函数封装</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#1-匀速运动函数封装"><span class="post-toc-number">1.1.</span> <span class="post-toc-text">1.匀速运动函数封装</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#2-减速（缓速）运动"><span class="post-toc-number">1.2.</span> <span class="post-toc-text">2.减速（缓速）运动</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#3-透明度运动"><span class="post-toc-number">1.3.</span> <span class="post-toc-text">3.透明度运动</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#4-综合运动（多物体多状态-amp-amp-回调函数）"><span class="post-toc-number">1.4.</span> <span class="post-toc-text">4.综合运动（多物体多状态&amp;&amp;回调函数）</span></a></li></ol></li></ol>
            </nav>
            <div class="toc-bar"><div>
        </aside>
    
</article>

    <div id="reward" class="page-modal reward-lay">
    <a class="close" href="javascript:;"><i class="icon icon-close"></i></a>
    <h3 class="reward-title">
        <i class="icon icon-quote-left"></i>
        我们一起来让这个世界有趣一点
        <i class="icon icon-quote-right"></i>
    </h3>
    <div class="reward-content">
        
        <div class="reward-code">
            <img id="rewardCode" src="/img/reward-wechat.jpg" alt="打赏二维码">
        </div>
        
        <label class="reward-toggle">
            <input id="rewardToggle" type="checkbox" class="reward-toggle-check"
                data-wechat="/img/reward-wechat.jpg" data-alipay="/img/reward-alipay.jpg">
            <div class="reward-toggle-ctrol">
                <span class="reward-toggle-item wechat">微信</span>
                <span class="reward-toggle-label"></span>
                <span class="reward-toggle-item alipay">支付宝</span>
            </div>
        </label>
        
    </div>
</div>

    

</div>

    </main>
    <footer class="footer ">
    
    <div class="bottom">
        <p>
            <span>
                Liuqh &copy; 2017 - 2019
            </span>
        		
           	
            
            
            <span>
	            Power by <a href="http://hexo.io/" target="_blank">Hexo</a> Theme <a href="https://github.com/codefine/hexo-theme-mellow" target="_blank">mellow</a>
            </span>
            
            
            

            
                
<span class="site-uv" title="总访客量">
    <i class="icon icon-user"></i>
    <i class="busuanzi-value" id="busuanzi_value_site_uv"></i>
</span>


<span class="site-pv" title="总访问量">
    <i class="icon icon-eye"></i>
    <i class="busuanzi-value" id="busuanzi_value_site_pv"></i>
</span>

            
        </p>
    </div>
</footer>

    <div class="mask" id="mask"></div>
<a href="javascript:;" id="gotop" class="waves-effect waves-circle waves-light"><span class="icon icon-lg icon-chevron-up"></span></a>



<div class="global-share" id="globalShare">
    <ul class="reset share-icons">
      
      <li>
        <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=http://liuqinghua0609.gitee.io/2019/07/26/JavaScript运动函数封装/&title=《JavaScript运动函数封装》 — Liuqh'blogs&pic=http://liuqinghua0609.gitee.io/img/avatar.jpg" data-title="微博">
          <i class="icon icon-weibo"></i>
        </a>
      </li>
      
      <li>
        <a class="weixin share-sns wxFab" href="javascript:;" data-title="微信">
          <i class="icon icon-weixin"></i>
        </a>
      </li>
      
      <li>
        <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=http://liuqinghua0609.gitee.io/2019/07/26/JavaScript运动函数封装/&title=《JavaScript运动函数封装》 — Liuqh'blogs&source=" data-title=" QQ">
          <i class="icon icon-qq"></i>
        </a>
      </li>
      
    </ul>
 </div>


<div class="page-modal wx-share" id="wxShare">
    <a class="close" href="javascript:;"><i class="icon icon-close"></i></a>
    <p>扫一扫，分享到微信</p>
    <img src="" alt="微信分享二维码">
</div>


    
    <!-- main-js -->
<script type="text/javascript" src="//cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="/js/plugins/fastclick.js?v=1.4.3"></script>
<script type="text/javascript" src="/js/plugins/ios-orientationchange-fix.js?v=1.4.3"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.2/dist/jquery.fancybox.min.js"></script>

<script type="text/javascript" src="//cdn.bootcss.com/node-waves/0.7.4/waves.min.js"></script>

<script type="text/javascript" src="/js/method.js?v=1.4.3"></script>
<script type="text/javascript" src="/js/blog.js?v=1.4.3"></script>

<!-- third-party -->






<script type="text/javascript" src="/js/plugins/local_search.js?v=1.4.3"></script>
<script type="text/javascript">
	var search_path = "search.xml";
	if (search_path.length === 0) {
		search_path = "search.xml";
	}
	var path = "/" + search_path;
	searchFunc(path, "local-search-input", "local-search-result");
</script>



<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>



    
    





    <!-- mathjax config similar to math.stackexchange -->
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
        tex2jax: {
            inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
            processEscapes: true,
            skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
        }
    });
</script>

<script type="text/x-mathjax-config">
    MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax(), i;
        for (i=0; i < all.length; i += 1) {
            all[i].SourceElement().parentNode.className += ' has-jax';
        }
    });
</script>

<script type="text/javascript" src="//cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML"></script>







    
</body>
</html>
